<template>
  <el-dialog
    v-model="centerDialogVisible"
    title="角色中资源信息"
    width="40%"
    center
    @close="closeDialog(false)"  >

           <el-card>
                <div style="display: flex;justify-content: space-between;margin-bottom: 8px">
                  <div>【{{roleName}}】可访问资源</div>
              
                </div>
                <el-tree
                    ref="tree"
                    :data="menus"
                    show-checkbox
                    node-key="id"
                    highlight-current
                    default-expand-all
                    :props="defaultProps"
                    @node-click="clickNode"
                />
                <div style="display: flex;justify-content: flex-end">
                  <el-button size="mini" @click="closeDialog">取消</el-button>
                  <el-button type="primary" size="mini" @click="updateRoles()">确认修改</el-button>
                </div>
              </el-card>


  </el-dialog>
</template>
<script >
  import { reactive, ref, toRefs ,onMounted} from "vue";
  import { ElMessage } from "element-plus";
  import {getRequest,putRequest} from  "@/utils/api";



export default {
  components: {},
  props: {
    centerDialogVisible:Boolean,
    roleId:String,
    roleName:String
  },
  setup(props, { emit }) {
    const tree = ref();
    const state = reactive({
      centerDialogVisible: props.centerDialogVisible,
      menus: [],
      menuForm: {},
      roleId:props.roleId,
      roleName:props.roleName,
      defaultProps:{
        label:'name',
        children:'children'
      }
    })
 
 const updateRoles = ()=> {

      let data = tree.value.getCheckedKeys().concat(tree.value.getHalfCheckedKeys());
   
      // console.info(updateArr);
      // let mids = '';
      // updateArr.forEach(item => {
      //   mids += '=' + item;
      // })
      putRequest('/system/basic/permiss/?rid=' + state.roleId +'&mids='+data.toString(),).then(res => {
        if (res) {
            ElMessage.success(res.message)
        emit("closeRoleDialog", false, data);
        }
      })
    }



    const closeDialog = (visible, data) => {
      emit("closeRoleDialog", false, data);
    };

     const initCheckedData = ()=>{
    
        getRequest('/system/basic/permiss/mid/' + props.roleId).then(response => {
         
          if (response) {
            console.info(response);
           // tree.value.setCheckedKeys(response) ;
           response.forEach(value => {
            tree.value.setChecked(value, true, false);
          })
          }else{
            tree.value.setCheckedKeys([]) ;
          }
        })
     }
   const initAllMenus = (state)=> {
      getRequest('/system/basic/permiss/menus').then(res => {
          if(res) {
            state.menus = res;
            initCheckedData();
          }
        })
      }
    //初始化所有节点信息
    onMounted(()=>{
      initAllMenus(state)
     // initCheckedData()
    })

  return {
    ...toRefs(state),tree,closeDialog,updateRoles

  }

  }
}

  </script>
<style scope> 
</style>